<template>
    <div class="nav-bar" :class="{'is-fixed': isFixed}">
        <div class="container">
            <div class="pro-title">
                {{title}}
            </div>
            <div class="pro-param">
                <a :href="'/#/product/' + id" >概述</a><span>|</span>
                <a href="">参数</a><span>|</span>
                <a href="">用户评价</a><span></span>
                <slot name="buy"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "product-param",
        props: {
            title: String,
            id: Number,
        },
        data() {
            return {
                isFixed: false
            }
        },
        mounted() {
            window.addEventListener('scroll', this.initHeight)
        },
        methods: {
            initHeight() {
                let scropllTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                this.isFixed = scropllTop > 152 ? true : false
            }
        },
    }
</script>

<style lang="scss">
    .nav-bar {
        height: 70px;
        line-height: 70px;
        border-top: 1px solid #E5E5E5;
        box-shadow: 0 2px 2px #eeeeee;
        &.is-fixed {
            position: fixed;
            top: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: 0 5px 5px #cccccc;
            z-index: 99999;
        }
        .container {
            width:1226px;
            margin-right:auto;
            margin-left:auto;
            display: flex;
            justify-content: space-between;
            .pro-title {
                font-size: 18px;
                color: #333333;
                font-weight: bold;
            }
            .pro-param {
                font-size: 14px;
                color: #666666;
                span {
                    margin: 0 10px;
                }
            }
        }

    }

</style>